<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-race
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">


<input type="button" value="深度比较" onclick="runParticularsCompare();">
<input type="button" value="快速比较" onclick="runCompare();">

<div id="batchStory" style="height: 100%"></div>

<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>

<div id="findPage" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">


    /**
     * 进行数据细节比较
     */
    function runParticularsCompare() {
        $.get('/sys/user/run-particulars-compare');
    };

    /**
     * 进行数据快速比较
     */
    function runCompare() {
        $.get('/sys/user/run-compare');
    }

    const typeList = [
        'batchStory',
        'findPage'
    ];
    /**
     * 创建不同类型的echarts
     */
    for (let type of typeList) {
        crateEcharts(type);
    }

    function crateEcharts(type) {

        let dom = document.getElementById(type);
        let myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        let app = {};
        let option;

        $.get('/orm/compare/records/findEchartsData?type=' + type,
            function (_echartsResponseData) {
                if (_echartsResponseData.code === 0) {
                    run(_echartsResponseData.data);
                } else {
                    console.error(_echartsResponseData);
                }

            }
        );

        function run(_EchartsData) {

            let _rawData = _EchartsData.data;
            let ormList = _EchartsData.ormList;
            const datasetWithFilters = [];
            const seriesList = [];
            echarts.util.each(ormList, function (orm) {
                var datasetId = 'dataset_' + orm;
                datasetWithFilters.push({
                    id: datasetId,
                    fromDatasetId: 'dataset_raw',
                    transform: {
                        type: 'filter',
                        config: {
                            and: [
                                {dimension: 'AffectsRows', gte: 0},
                                {dimension: 'ORM', '=': orm}
                            ]
                        }
                    }
                });
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    showSymbol: false,
                    name: orm,
                    endLabel: {
                        show: true,
                        formatter: function (params) {
                            return params.value[3] + ': ' + params.value[0];
                        }
                    },
                    labelLayout: {
                        moveOverlap: 'shiftY'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    encode: {
                        x: 'AffectsRows',
                        y: 'OperationTime',
                        label: ['AffectsRows', 'OperationTime'],
                        itemName: 'AffectsRows',
                        tooltip: ['OperationTime']
                    }
                });
            });
            option = {
                animationDuration: 100,
                dataset: [
                    {
                        id: 'dataset_raw',
                        source: _rawData
                    },
                    ...datasetWithFilters
                ],
                title: {
                    text: '不同ORM 执行：' + type + ' 时间耗时&影响行数\n'
                },
                tooltip: {
                    order: 'valueDesc',
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    nameLocation: 'middle',
                    name: '影响条数'
                },
                yAxis: {
                    name: '执行时间(/毫秒)'
                },
                grid: {
                    left:'3%',
                    top:'20%',
                    right: '7%',
                    bottom: '6%',
                    containLabel: true
                },
                legend: {
                    data: ormList,
                    top:'10%',
                    itemGap: 10 // 设置图例项目之间的间隔大小
                },
                series: seriesList,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
            };
            myChart.setOption(option);
        }

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    }
</script>
</body>
</html>